<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>shiro配置首页</title>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>

<div id="app">
    <div>
        <!--数据库详情弹窗-->
        <el-dialog
                title="数据库详情"
                :visible.sync="databaseInfoDialogVisible"
                width="25%"
                center>
            <div style="width: 100%; cursor: default; font-size: large">
                <span>连接数据库名称: {{databaseInfo.database.catalog}}</span><br/>
                <span>数据库类型: {{databaseInfo.database.databaseProductName}}</span><br/>
                <!--<span>数据库大版本: {{databaseInfo.database.databaseProductName}}</span><br/>-->
                <span>数据库详细版本: {{databaseInfo.database.databaseProductVersion}}</span><br/>
                <span>连接URL: {{databaseInfo.database.url}}</span>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="databaseInfoDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <!--编辑信息弹窗-->
        <el-dialog
                width="30%"
                title="编辑"
                :visible.sync="innerUpdateVisible"
                append-to-body>
            <!--shiro管理员表-->
            <div v-if="shiroAdminTableControl">
                <el-form ref="form" :model="ShiroAdmin.data" label-width="100px">
                    <el-form-item label="管理员ID">
                        <!--管理员ID-->
                        <span>{{ShiroAdmin.data.id}}</span>
                    </el-form-item>
                    <el-form-item label="账号">
                        <!--账号account输入框-->
                        <el-input v-model="ShiroAdmin.data.account" placeholder="请输入account"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <!--密码输入框-->
                        <el-input v-model="ShiroAdmin.data.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <!--邮箱输入框-->
                        <el-input v-model="ShiroAdmin.data.email" placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="手机">
                        <!--手机输入框-->
                        <el-input v-model="ShiroAdmin.data.phone" placeholder="请输入手机"></el-input>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button @click="innerUpdateVisible = false">取消</el-button>
                    <el-button @click="innerUpdateVisible = false, updateShiroAdmin()" type="primary">更新</el-button>
                </div>
            </div>
            <!--资源表-->
            <div v-else-if="shiroResourceTableControl">
                <el-form ref="form" :model="shiroResource.data" label-width="100px">
                    <el-form-item label="资源ID">
                        <!--资源ID-->
                        <span>{{shiroResource.data.id}}</span>
                    </el-form-item>
                    <el-form-item label="选择类型">
                        <!--类型选择框[url/shiroResources]-->
                        <el-select v-model="shiroResource.data.type" placeholder="请选择类型">
                            <el-option
                                    v-for="item in shiroResource.type"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="资源值">
                        <!--资源输入框-->
                        <el-input v-model="shiroResource.data.value" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="请求方法">
                        <!--请求方法[GET/POST]-->
                        <span>{{shiroResource.data.method}}</span>
                    </el-form-item>
                    <el-form-item label="资源描述">
                        <!--描述输入框-->
                        <el-input v-model="shiroResource.data.description" placeholder="请输入描述"></el-input>
                    </el-form-item>
                    <el-form-item label="拦截方式">
                        <!--control拦截选择框[anon/authc/authcbasic/noSessionCreation/perms/port/shiroRoles/ssl/shiroUser]-->
                        <el-select v-model="shiroResource.data.control" placeholder="请选择类型">
                            <el-option
                                    v-for="item in shiroResource.control"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button @click="innerUpdateVisible = false">取消</el-button>
                    <el-button @click="innerUpdateVisible = false, updateShiroResource()" type="primary">更新</el-button>
                </div>
            </div>
            <!--shiro_user用户表-->
            <div v-else-if="shiroUserTableControl">
                <el-form ref="form" :model="user.data" label-width="100px">
                    <el-form-item label="用户ID">
                        <!--资源ID-->
                        <span>{{user.data.id}}</span>
                    </el-form-item>
                    <el-form-item label="账号">
                        <!--账号account输入框-->
                        <el-input v-model="user.data.account" placeholder="请输入account"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称">
                        <!--account输入框-->
                        <el-input v-model="user.data.nickname" placeholder="请输入昵称"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <span>{{user.data.password}}</span>
                    </el-form-item>
                    <el-form-item label="盐值">
                        <span>{{user.data.salt}}</span>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button @click="innerUpdateVisible = false">取消</el-button>
                    <el-button @click="innerUpdateVisible = false, updateUser()" type="primary">更新</el-button>
                </div>
            </div>
            <!--用户-角色表-->
            <div v-else-if="shiroUserRoleTableControl">
                <el-form ref="form" :model="ShiroUserRole.data" label-width="100px">
                    <el-form-item label="ID">
                        <!--用户-角色ID-->
                        <span>{{ShiroUserRole.data.id}}</span>
                    </el-form-item>
                    <el-form-item label="用户ID">
                        <!--用户ID-->
                        <el-input v-model="ShiroUserRole.data.user_id" placeholder="请输入用户ID"></el-input>
                    </el-form-item>
                    <el-form-item label="角色ID">
                        <!--角色ID-->
                        <el-input v-model="ShiroUserRole.data.role_id" placeholder="请输入角色ID"></el-input>
                    </el-form-item>
                    <el-form-item label="用户所在表">
                        <!--用户所在表-->
                        <el-input v-model="ShiroUserRole.data.user_type" placeholder="请输入用户所在表"></el-input>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button @click="innerUpdateVisible = false">取消</el-button>
                    <el-button @click="innerUpdateVisible = false, updateShiroUserRole()" type="primary">更新</el-button>
                </div>
            </div>
            <!--角色表-->
            <div v-else-if="shiroRoleTableControl">
                <el-form ref="form" :model="ShiroRole.data" label-width="100px">
                    <el-form-item label="角色ID">
                        <!--角色ID-->
                        <span>{{ShiroRole.data.id}}</span>
                    </el-form-item>
                    <el-form-item label="角色名">
                        <!--角色名称-->
                        <el-input v-model="ShiroRole.data.name" placeholder="请输入角色名"></el-input>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button @click="innerUpdateVisible = false">取消</el-button>
                    <el-button @click="innerUpdateVisible = false, updateShiroRole()" type="primary">更新</el-button>
                </div>
            </div>
            <!--角色-权限表-->
            <div v-else-if="shiroRolePermissionTableControl">
                <el-form ref="form" :model="ShiroRolePermission.data" label-width="100px">
                    <el-form-item label="ID">
                        <!--ID-->
                        <span>{{ShiroRolePermission.data.id}}</span>
                    </el-form-item>
                    <el-form-item label="角色ID">
                        <!--角色ID-->
                        <el-input v-model="ShiroRolePermission.data.role_id" placeholder="请输入角色ID"></el-input>
                    </el-form-item>
                    <el-form-item label="权限ID">
                        <!--权限ID-->
                        <el-input v-model="ShiroRolePermission.data.permission_id" placeholder="请输入权限ID"></el-input>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button @click="innerUpdateVisible = false">取消</el-button>
                    <el-button @click="innerUpdateVisible = false, updateShiroRolePermission()" type="primary">更新</el-button>
                </div>
            </div>
            <!--权限表-->
            <div v-else-if="shiroPermissionTableControl">
                <el-form ref="form" :model="ShiroPermission.data" label-width="100px">
                    <el-form-item label="权限ID">
                        <!--权限ID-->
                        <span>{{ShiroPermission.data.id}}</span>
                    </el-form-item>
                    <el-form-item label="权限值">
                        <!--权限值-->
                        <el-input v-model="ShiroPermission.data.value" placeholder="请输入值"></el-input>
                    </el-form-item>
                    <el-form-item label="权限描述">
                        <!--权限描述-->
                        <el-input v-model="ShiroPermission.data.description" placeholder="请输入描述"></el-input>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button @click="innerUpdateVisible = false">取消</el-button>
                    <el-button @click="innerUpdateVisible = false, updateShiroPermission()" type="primary">更新</el-button>
                </div>
            </div>
        </el-dialog>

        <!--添加信息弹窗-->
        <el-dialog
                width="30%"
                title="添加"
                :visible.sync="innerInsertVisible"
                append-to-body>
            <!--shiro管理员表-->
            <div v-if="shiroAdminTableControl">
                <el-form ref="form" :model="ShiroAdmin.data" label-width="100px">
                    <el-form-item label="账号">
                        <!--账号account输入框-->
                        <el-input v-model="ShiroAdmin.data.account" placeholder="请输入account"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <!--密码输入框-->
                        <el-input v-model="ShiroAdmin.data.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <!--邮箱输入框-->
                        <el-input v-model="ShiroAdmin.data.email" placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="手机">
                        <!--手机输入框-->
                        <el-input v-model="ShiroAdmin.data.phone" placeholder="请输入手机"></el-input>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button @click="innerInsertVisible = false">取消</el-button>
                    <el-button @click="innerInsertVisible = false, insertShiroAdmin()" type="primary">确认添加</el-button>
                </div>
            </div>
            <!--资源表-->
            <div v-else-if="shiroResourceTableControl">
                <el-form ref="form" :model="shiroResource.data" label-width="100px">
                    <el-form-item label="选择类型">
                        <!--类型选择框[url/shiroResources]-->
                        <el-select v-model="shiroResource.data.type" placeholder="请选择类型">
                            <el-option
                                    v-for="item in shiroResource.type"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="资源值">
                        <!--资源输入框-->
                        <el-input v-model="shiroResource.data.value" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="请求方法">
                        <!--请求方法[GET/POST]-->
                        <!--<span>{{shiroResource.data.method}}</span>-->
                        <el-checkbox-group v-model="shiroResource.method">
                            <el-checkbox label="GET"></el-checkbox>
                            <el-checkbox label="POST"></el-checkbox>
                            <el-checkbox label="PUT" disabled></el-checkbox>
                            <el-checkbox label="DELETE" disabled></el-checkbox>
                            <el-checkbox label="OPTIONS" disabled></el-checkbox>
                            <el-checkbox label="PATCH" disabled></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="资源描述">
                        <!--描述输入框-->
                        <el-input v-model="shiroResource.data.description" placeholder="请输入描述"></el-input>
                    </el-form-item>
                    <el-form-item label="拦截方式">
                        <!--control拦截选择框[anon/authc/authcbasic/noSessionCreation/perms/port/shiroRoles/ssl/shiroUser]-->
                        <el-select v-model="shiroResource.data.control" placeholder="请选择类型">
                            <el-option
                                    v-for="item in shiroResource.control"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button @click="innerInsertVisible = false">取消</el-button>
                    <el-button @click="innerInsertVisible = false, insertResource()" type="primary">确认添加</el-button>
                </div>
            </div>
            <!--shiro_user用户表-->
            <div v-else-if="shiroUserTableControl">
                <el-form ref="form" :model="user.data" label-width="100px">
                    <el-form-item label="账号">
                        <!--账号account输入框-->
                        <el-input v-model="user.data.account" placeholder="请输入account"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称">
                        <!--account输入框-->
                        <el-input v-model="user.data.nickname" placeholder="请输入昵称"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <!--密码输入框-->
                        <el-input v-model="user.data.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button @click="innerInsertVisible = false">取消</el-button>
                    <el-button @click="innerInsertVisible = false, insertUser()" type="primary">确认添加</el-button>
                </div>
            </div>
            <!--用户-角色表-->
            <div v-else-if="shiroUserRoleTableControl">
                <el-form ref="form" :model="ShiroUserRole.data" label-width="100px">
                    <el-form-item label="用户ID">
                        <!--用户ID-->
                        <el-input v-model="ShiroUserRole.data.user_id" placeholder="请输入用户ID"></el-input>
                    </el-form-item>
                    <el-form-item label="角色ID">
                        <!--角色ID-->
                        <el-input v-model="ShiroUserRole.data.role_id" placeholder="请输入角色ID"></el-input>
                    </el-form-item>
                    <el-form-item label="用户所在表">
                        <!--用户所在表-->
                        <el-input v-model="ShiroUserRole.data.user_type" placeholder="请输入用户所在表"></el-input>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button @click="innerInsertVisible = false">取消</el-button>
                    <el-button @click="innerInsertVisible = false, insertUserRole()" type="primary">确认添加</el-button>
                </div>
            </div>
            <!--角色表-->
            <div v-else-if="shiroRoleTableControl">
                <el-form ref="form" :model="ShiroRole.data" label-width="100px">
                    <el-form-item label="角色名">
                        <!--角色名称-->
                        <el-input v-model="ShiroRole.data.name" placeholder="请输入角色名"></el-input>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button @click="innerInsertVisible = false">取消</el-button>
                    <el-button @click="innerInsertVisible = false, insertRole()" type="primary">确认添加</el-button>
                </div>
            </div>
            <!--角色-权限表-->
            <div v-else-if="shiroRolePermissionTableControl">
                <el-form ref="form" :model="ShiroRolePermission.data" label-width="100px">
                    <el-form-item label="角色ID">
                        <!--角色ID-->
                        <el-input v-model="ShiroRolePermission.data.role_id" placeholder="请输入角色ID"></el-input>
                    </el-form-item>
                    <el-form-item label="权限ID">
                        <!--权限ID-->
                        <el-input v-model="ShiroRolePermission.data.permission_id" placeholder="请输入权限ID"></el-input>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button @click="innerInsertVisible = false">取消</el-button>
                    <el-button @click="innerInsertVisible = false, insertRolePermission()" type="primary">确认添加</el-button>
                </div>
            </div>
            <!--权限表-->
            <div v-else-if="shiroPermissionTableControl">
                <el-form ref="form" :model="ShiroPermission.data" label-width="100px">
                    <el-form-item label="权限值">
                        <!--权限值-->
                        <el-input v-model="ShiroPermission.data.value" placeholder="请输入权限参数"></el-input>
                    </el-form-item>
                    <el-form-item label="权限描述">
                        <!--权限描述-->
                        <el-input v-model="ShiroPermission.data.description" placeholder="请输入权限描述"></el-input>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button @click="innerInsertVisible = false">取消</el-button>
                    <el-button @click="innerInsertVisible = false, insertPermission()" type="primary">确认添加</el-button>
                </div>
            </div>
        </el-dialog>

        <!--部分弹窗提示 删除提示/重载提示-->
        <div>
            <!--重载shiroResource资源拦截配置确认框-->
            <el-dialog
                    title="提示: 确认重载shiroResource配置表？"
                    :visible.sync="resetShiroResourceDialog"
                    width="30%"
                    center>
                <span>注意: 重载后部分目前可访问接口可能无法访问，请确认配置信息正确!!!</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="resetShiroResourceDialog = false">取 消</el-button>
                    <el-button type="primary" @click="resetShiroResourceDialog = false, resetShiroResource()">确认配置</el-button>
                </span>
            </el-dialog>
            <!--重置shiroResource数据库资源确认框-->
            <el-dialog
                    title="提示: 确认重置shiroResource配置表？"
                    :visible.sync="initShiroResourceDialog"
                    width="30%"
                    center>
                <span>注意: 重置后可能会导致角色表失效，需再次配置角色表，请确认是否重置!!!</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="initShiroResourceDialog = false">取 消</el-button>
                    <el-button type="primary" @click="initShiroResourceDialog = false, initShiroResource()">确认配置</el-button>
                </span>
            </el-dialog>
            <!--删除指定shiro工具管理员确认框-->
            <el-dialog
                    title="提示: 确认删除该shiro管理员？"
                    :visible.sync="deleteShiroAdminDialog"
                    width="30%"
                    center>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="deleteShiroAdminDialog = false">取 消</el-button>
                    <el-button type="primary" @click="deleteShiroAdminDialog = false, deleteShiroAdmin()">确认删除</el-button>
                </span>
            </el-dialog>
            <!--删除指定shiroResource资源确认框-->
            <el-dialog
                    title="提示: 确认删除该shiroResource配置？"
                    :visible.sync="deleteShiroResourceDialog"
                    width="30%"
                    center>
                <span>注意: 请谨慎操作!!!</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="deleteShiroResourceDialog = false">取 消</el-button>
                    <el-button type="primary" @click="deleteShiroResourceDialog = false, deleteShiroResource()">确认删除</el-button>
                </span>
            </el-dialog>
            <!--删除指定shiroUser用户确认框-->
            <el-dialog
                    title="提示: 确认删除该用户？"
                    :visible.sync="deleteShiroUserDialog"
                    width="30%"
                    center>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="deleteShiroUserDialog = false">取 消</el-button>
                    <el-button type="primary" @click="deleteShiroUserDialog = false, deleteUser()">确认删除</el-button>
                </span>
            </el-dialog>
            <!--删除指定shiroUserRole用户-角色确认框-->
            <el-dialog
                    title="提示: 确认删除该用户角色？"
                    :visible.sync="deleteShiroUserRoleDialog"
                    width="30%"
                    center>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="deleteShiroUserRoleDialog = false">取 消</el-button>
                    <el-button type="primary" @click="deleteShiroUserRoleDialog = false, deleteShiroUserRole()">确认删除</el-button>
                </span>
            </el-dialog>
            <!--删除指定shiroRole角色确认框-->
            <el-dialog
                    title="提示: 确认删除该角色？"
                    :visible.sync="deleteShiroRoleDialog"
                    width="30%"
                    center>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="deleteShiroRoleDialog = false">取 消</el-button>
                    <el-button type="primary" @click="deleteShiroRoleDialog = false, deleteShiroRole()">确认删除</el-button>
                </span>
            </el-dialog>
            <!--删除指定shiroRolePermission角色-权限确认框-->
            <el-dialog
                    title="提示: 确认删除该角色权限？"
                    :visible.sync="deleteShiroRolePermissionDialog"
                    width="30%"
                    center>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="deleteShiroRolePermissionDialog = false">取 消</el-button>
                    <el-button type="primary" @click="deleteShiroRolePermissionDialog = false, deleteShiroRolePermission()">确认删除</el-button>
                </span>
            </el-dialog>
            <!--删除指定shiroPermission权限确认框-->
            <el-dialog
                    title="提示: 确认删除该权限？"
                    :visible.sync="deleteShiroPermissionDialog"
                    width="30%"
                    center>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="deleteShiroPermissionDialog = false">取 消</el-button>
                    <el-button type="primary" @click="deleteShiroPermissionDialog = false, deleteShiroPermission()">确认删除</el-button>
                </span>
            </el-dialog>
        </div>

        <!--查看表信息弹窗-->
        <el-dialog :visible.sync="showTableDialogVisible" title="查看信息" width="60%" draggable>
            <!--shiro_admin_manage表信息上方按钮等显示-->
            <div v-if="shiroAdminTableControl">
                <el-button type="primary" @click="innerInsertVisible = true">添加shiro工具管理员</el-button>
            </div>
            <!--资源表信息上方按钮等显示-->
            <div v-else-if="shiroResourceTableControl">
                <el-tooltip placement="top">
                    <template #content>通过后端接口信息重置URL类型资源</template>
                    <el-button type="primary" @click="initShiroResourceDialog = true">重置/更新</el-button>
                </el-tooltip>
                <el-tooltip placement="top">
                    <template #content>将数据库中资源配置重新写入到shiro拦截器中</template>
                    <el-button type="primary" @click="resetShiroResourceDialog = true">重载资源配置</el-button>
                </el-tooltip>
                <el-button type="primary" @click="innerInsertVisible = true">添加资源</el-button>
                <el-tooltip placement="right">
                    <template #content>
                        control参数 : <br/>
                        &nbsp;&nbsp;noSessionCreation: 禁止创建会话<br/>
                        认证过滤器 ↓<br/>
                        &nbsp;&nbsp;anon: 可以匿名访问<br/>
                        &nbsp;&nbsp;authc: 需要登录后访问<br/>
                        &nbsp;&nbsp;authcBasic: 需要basic登陆访问<br/>
                        &nbsp;&nbsp;shiroUser: 需要已登录或"记住我"的用户才能访问<br/>
                        授权过滤器 ↓<br/>
                        &nbsp;&nbsp;perms: 需要指定权限才能访问<br/>
                        &nbsp;&nbsp;port: 需要指定端口才能访问<br/>
                        &nbsp;&nbsp;shiroRoles: 需要指定角色才能访问<br/>
                        &nbsp;&nbsp;ssl: 需要HTTPS请求才能访问<br/>
                    </template>
                    <i class="el-icon-question"></i>
                </el-tooltip>
            </div>
            <!--shiro_user表信息上方按钮等显示-->
            <div v-else-if="shiroUserTableControl">
                <el-button type="primary" @click="innerInsertVisible = true">添加shiro_user用户</el-button>
            </div>
            <!--用户-角色表信息上方按钮等显示-->
            <div v-else-if="shiroUserRoleTableControl">
                <el-button type="primary" @click="innerInsertVisible = true">添加shiro_user用户角色</el-button>
            </div>
            <!--角色表信息上方按钮等显示-->
            <div v-else-if="shiroRoleTableControl">
                <el-button type="primary" @click="innerInsertVisible = true">添加角色</el-button>
            </div>
            <!--角色-权限表信息上方按钮等显示-->
            <div v-else-if="shiroRolePermissionTableControl">
                <el-button type="primary" @click="innerInsertVisible = true">添加角色-权限</el-button>
            </div>
            <!--权限表信息上方按钮等显示-->
            <div v-else-if="shiroPermissionTableControl">
                <el-button type="primary" @click="innerInsertVisible = true">添加权限</el-button>
            </div>
            <!--其他表信息上方按钮等显示-->
            <div v-else></div>

            <!--表格-->
            <el-table :data="tableShowData" v-loading="tableShowLoading" style="width: 100%">
                <el-table-column v-for="(item, key) in tableShowHead" :key="key" :prop="item.value" :label="item.name">
                    <template slot-scope="scope">
                        <span>
                            {{scope.row[scope.column.property]}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text">
                            <!--资源表shiroResource显示控制-->
                            <div v-if="shiroAdminTableControl">
                                <el-button type="text" @click="innerUpdateVisible = true, shiroAdminInfo(scope.row)">编辑</el-button>
                                <el-button type="text" @click="deleteShiroAdminDialog = true, shiroAdminInfo(scope.row)">删除</el-button>
                            </div>
                            <!--资源表shiroResource显示控制-->
                            <div v-else-if="shiroResourceTableControl">
                                <el-button type="text" @click="innerUpdateVisible = true, shiroResourceInfo(scope.row)">编辑</el-button>
                                <el-button type="text" @click="deleteShiroResourceDialog = true, shiroResourceInfo(scope.row)">删除</el-button>
                            </div>
                            <!--用户表shiroUser显示控制-->
                            <div v-else-if="shiroUserTableControl">
                                <el-button type="text" @click="innerUpdateVisible = true, userInfo(scope.row)">编辑</el-button>
                                <el-button type="text" @click="deleteShiroUserDialog = true, userInfo(scope.row)">删除</el-button>
                            </div>
                            <!--用户-角色表shiroUserRole显示控制-->
                            <div v-else-if="shiroUserRoleTableControl">
                                <el-button type="text" @click="innerUpdateVisible = true, shiroUserRoleInfo(scope.row)">编辑</el-button>
                                <el-button type="text" @click="deleteShiroUserRoleDialog = true, shiroUserRoleInfo(scope.row)">删除</el-button>
                            </div>
                            <!--角色表shiroRole显示控制-->
                            <div v-else-if="shiroRoleTableControl">
                                <el-button type="text" @click="innerUpdateVisible = true, shiroRoleInfo(scope.row)">编辑</el-button>
                                <el-button type="text" @click="deleteShiroRoleDialog = true, shiroRoleInfo(scope.row)">删除</el-button>
                            </div>
                            <!--角色-权限表shiroRolePermission显示控制-->
                            <div v-else-if="shiroRolePermissionTableControl">
                                <el-button type="text" @click="innerUpdateVisible = true, shiroRolePermissionInfo(scope.row)">编辑</el-button>
                                <el-button type="text" @click="deleteShiroRolePermissionDialog = true, shiroRolePermissionInfo(scope.row)">删除</el-button>
                            </div>
                            <!--权限表shiroPermission显示控制-->
                            <div v-else-if="shiroPermissionTableControl">
                                <el-button type="text" @click="innerUpdateVisible = true, shiroPermissionInfo(scope.row)">编辑</el-button>
                                <el-button type="text" @click="deleteShiroPermissionDialog = true, shiroPermissionInfo(scope.row)">删除</el-button>
                            </div>
                            <!--其他显示控制 [后续自定义]-->
                            <div v-else>
                                <el-button type="text">查看</el-button>
                            </div>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="showTableDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="showTableDialogVisible = false">确认</el-button>
              </span>
            </template>
        </el-dialog>

        <!--主体布局-->
        <el-container>
            <!--Header头部-->
            <el-header id="header" class="el-header">
                <!--工具名等-->
                <div style="float: left">
                    <span style="font-size: x-large; font-weight: bolder">shiro-tool</span>
                </div>
                <!--修改配色-->
                <div style="float: right; margin-top: 10px">
                    <el-color-picker v-model="default_color" @change="backgroundColorChange()"></el-color-picker>
                </div>
                <!--选择配置方-->
                <div style="float: right">
                    <el-select v-model="identity" placeholder="请选择配置方">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </el-header>
            <!--Main中部-->
            <el-main id="main" class="el-main" style="text-align: left">
                <!--shiro工具包管理员-->
                <div v-if="identity === 'shiroAdmin'" style="position: initial">
                    <!--刷新数据表信息-->
                    <div style="line-height: 42px; margin-left: 30px">
                        <el-tooltip class="item" effect="light" content="通过后端验证的方式(返回true/false确定是否存在工具必须表)" placement="right-start">
                            <el-link :underline="false" @click="shiroToolDependencyTableVerification()"><i class="el-icon-view el-icon--right"></i>刷新/检查相关配置表是否存在</el-link>
                        </el-tooltip>
                    </div>
                    <!--数据库相关信息-->
                    <div style="line-height: 36px; margin-left: 30px">
                        <span style="cursor: default"> 项目连接库: </span>
                        <el-tag @click="databaseInfoDialogVisible = true" style="font-size: large; cursor: pointer">{{databaseInfo.database.catalog}}</el-tag>
                        <el-tooltip class="item" effect="dark" content="刷新表格" placement="right">
                            <i class="el-icon-refresh-right" style="cursor: pointer" @click="refreshTable()"></i>
                        </el-tooltip>
                        <el-tooltip class="item" effect="light" content="根据已有表动态添加shiro工具所需表" placement="right-start">
                            <el-button type="text" style="margin-left: 20px" @click="">创建初始表</el-button>
                        </el-tooltip>
                        <div>
                            <el-table
                                    :data="databaseInfo.tables"
                                    v-loading="tablesLoading"
                                    border
                                    style="width: 100%; cursor: pointer">
                                <el-table-column
                                        fixed
                                        prop="name"
                                        label="表名"
                                        width="260">
                                </el-table-column>
                                <el-table-column
                                        prop="type"
                                        label="类型"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        show-overflow-tooltip
                                        prop="remarks"
                                        label="注释"
                                        width="360">
                                </el-table-column>
                                <el-table-column
                                        label="操作"
                                        width="100">
                                    <template slot-scope="scope">
                                        <el-button @click="showTableDialogVisible = true, showTableData(scope.row.name)" type="text" size="small">管理</el-button>
                                        <!--<el-button type="text" size="small">编辑</el-button>-->
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>

                    <el-form label-width="100px">
                        <!--管理员认证方式-->
                        <el-form-item label="认证方式">
                            <el-switch
                                    style="display: contents"
                                    v-model="ShiroAdmin.authenticationMode"
                                    active-color="#409eff"
                                    inactive-color="#13ce66"
                                    disabled
                                    active-text="cookie [token]"
                                    inactive-text="session">
                            </el-switch>
                        </el-form-item>
                    </el-form>

                    <!--底部按钮-->
                    <div>
                        <el-button type="primary" style="margin: 0 36px">保存配置</el-button>
                    </div>
                </div>
                <!--一依赖项目用户-->
                <div v-if="identity === 'shiroUser'" style="position: initial">
                    <el-form label-width="100px">
                        <el-form-item label="用户-记住我">
                            <!--记住我switch按钮-->
                            <el-switch v-model="shiroAdmin.rememberMe" @change="rememberMeChange()"></el-switch>
                            <!--小问号提示-->
                            <el-tooltip class="box-item" effect="dark" content="注意：只有开启“记住我”功能才能使用cookie认证方式" placement="right">
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </el-form-item>
                        <!--管理员认证方式-->
                        <el-form-item label="认证方式">
                            <el-switch
                                    v-model="ShiroAdmin.authenticationMode"
                                    :disabled="!shiroAdmin.rememberMe"
                                    style="display: contents"
                                    active-color="#409eff"
                                    inactive-color="#13ce66"
                                    active-text="cookie [token]"
                                    inactive-text="session">
                            </el-switch>
                        </el-form-item>
                        <!--登录接管-->
                        <el-form-item label="是否接管登录">
                            <el-switch
                                    v-model="shiroUser.supportLogin"
                                    active-text="接管"
                                    inactive-text="不接管">
                            </el-switch>
                        </el-form-item>
                        <!--登录接管后登录接口-->
                        <el-form-item label="登录接口名" v-if="shiroUser.supportLogin">
                            <el-input
                                    style="width: 30%"
                                    placeholder="请输入接口名 [格式: /***/***]"
                                    maxlength="64"
                                    minlength="2"
                                    v-model="shiroUser.loginApi"
                                    clearable>
                            </el-input>
                        </el-form-item>
                    </el-form>

                    <!--底部按钮-->
                    <div>
                        <el-button type="primary" style="margin: 0 36px">保存配置</el-button>
                    </div>
                </div>
            </el-main>
            <!--Footer尾部-->
            <el-footer id="footer" class="el-footer" style="height: auto">
                <div>
                    <span>@楠沐笙 &nbsp;&nbsp;&nbsp; z1632x@163.com</span>
                </div>
            </el-footer>
        </el-container>
    </div>
</div>
</body>

<script type="text/javascript">
    new Vue({
        el: '#app',
        // 数据监控
        watch: {
            // 监控添加按钮，防止先打开编辑再打开添加后数据为编辑时参数
            innerInsertVisible: function (newVal, oldVal) {
                if (newVal && !oldVal) {
                    this.shiroAdminTableControl ? Object.keys(this.ShiroAdmin.data).forEach(key => (this.ShiroAdmin.data[key] = '')) : null;
                    this.shiroResourceTableControl ? Object.keys(this.shiroResource.data).forEach(key => key !== 'method' ? this.shiroResource.data[key] = '' : this.shiroResource.data[key] = new Array()) : null;
                    this.shiroUserTableControl ? Object.keys(this.user.data).forEach(key => (this.user.data[key] = '')) : null;
                    this.shiroUserRoleTableControl ? Object.keys(this.ShiroUserRole.data).forEach(key => (this.ShiroUserRole.data[key] = '')) : null;
                    this.shiroRoleTableControl ? Object.keys(this.ShiroRole.data).forEach(key => (this.ShiroRole.data[key] = '')) : null;
                    this.shiroRolePermissionTableControl ? Object.keys(this.ShiroRolePermission.data).forEach(key => (this.ShiroRolePermission.data[key] = '')) : null;
                    this.shiroPermissionTableControl ? Object.keys(this.ShiroPermission.data).forEach(key => (this.ShiroPermission.data[key] = '')) : null;
                }
            }
        },
        data: function () {
            return {
                // 背景颜色
                default_color: '#67c23a',
                // 配置方
                options: [
                    {
                        value: 'shiroAdmin',
                        label: 'shiro管理员'
                    }, {
                        value: 'shiroUser',
                        label: '项目用户'
                    }
                ],
                // 选中配置方
                identity: 'shiroAdmin',
                // 表格加载
                tablesLoading: true,
                // 数据库点击查看详情
                databaseInfoDialogVisible: false,
                // 点击查看表信息
                showTableDialogVisible: false,
                // 点击查看表加载
                tableShowLoading: false,
                // 内层更新dialog弹窗
                innerUpdateVisible: false,
                // 内层添加dialog弹窗
                innerInsertVisible: false,
                // 查看表 - 表头head
                tableShowHead: [
                    { name: '**', value: '**' },
                ],
                // 查看表 - 数据data
                tableShowData: [
                    {
                        id: 0,
                        account: "000000",
                        nickname: "000000"
                    }
                ],
                /** 查看表时部分按钮显示 */
                // shiro工具管理员信息显示按钮
                shiroAdminTableControl: false,
                // 资源表信息显示按钮
                shiroResourceTableControl: false,
                // shiro_user用户表信息显示按钮
                shiroUserTableControl: false,
                // shiro_user用户-角色表信息显示按钮
                shiroUserRoleTableControl: false,
                // 角色表信息显示按钮
                shiroRoleTableControl: false,
                // 角色-权限表信息显示按钮
                shiroRolePermissionTableControl: false,
                // 权限表信息显示按钮
                shiroPermissionTableControl: false,
                // 数据库相关信息
                databaseInfo: {
                    database: {
                        catalog: '****',
                        databaseProductName: '****',
                        databaseMajorVersion: '*',
                        databaseProductVersion: '*.*.**',
                        url: 'jdbc:mysql://**********'
                    },
                    tables: [
                        {
                            name: '****',
                            type: '****',
                            remarks: '****',
                        }
                    ]
                },
                // shiro工具包相关参数
                // TODO: 后期该参数修改，与shiro工具管理员对象名区分开
                ShiroAdmin: {
                    // 记住我
                    rememberMe: false,
                    // shiro管理工具认证方式
                    authenticationMode: false
                },
                // 项目中用户相关参数
                shiroUser: {
                    // 是否取代登录
                    supportLogin: false,
                    // 项目用户登录接口名
                    loginApi: '/login',
                },
                // shiro工具管理员参数
                ShiroAdmin: {
                    data: {
                        id: 0,
                        account: '',
                        password: '',
                        salt: '',
                        email: '',
                        phone: ''
                    }
                },
                // 资源表参数
                // TODO: 后期改为首字母大写
                shiroResource: {
                    data: {
                        id: 0,
                        type: '',
                        value: '',
                        name: '',
                        method: '',
                        description: '',
                        control: ''
                    },
                    type: [
                        {
                            value: 'url',
                            label: 'url'
                        }, {
                            value: 'shiroResources',
                            label: 'shiroResources'
                        }
                    ],
                    method: [
                        'GET','POST'
                    ],
                    control: [
                        {
                            value: 'anon',
                            label: 'anon',
                            disabled: false,
                            description: '可匿名访问'
                        }, {
                            value: 'authc',
                            label: 'authc',
                            disabled: false,
                            description: '需认证后访问'
                        }, {
                            value: 'authcBasic',
                            label: 'authcBasic',
                            disabled: true,
                            description: '需basic认证后访问'
                        }, {
                            value: 'noSessionCreation',
                            label: 'noSessionCreation',
                            disabled: true,
                            description: '禁止创建会话'
                        }, {
                            value: 'perms',
                            label: 'perms',
                            disabled: true,
                            description: '需指定权限访问'
                        }, {
                            value: 'port',
                            label: 'port',
                            disabled: true,
                            description: '需指定端口访问'
                        }, {
                            value: 'shiroRoles',
                            label: 'shiroRoles',
                            disabled: true,
                            description: '需指定角色访问'
                        }, {
                            value: 'ssl',
                            label: 'ssl',
                            disabled: true,
                            description: '需HTTPS请求访问'
                        }, {
                            value: 'shiroUser',
                            label: 'shiroUser',
                            disabled: true,
                            description: '需已登录或"记住我"开启用户才能访问'
                        }
                    ]
                },
                // 用户表参数
                user: {
                    data: {
                        id: 0,
                        account: '',
                        nickname: '',
                        password: '',
                        salt: ''
                    }
                },
                // 用户-角色表参数
                ShiroUserRole: {
                    data: {
                        id: 0,
                        user_id: 0,
                        role_id: 0,
                        user_type: ''
                    },
                },
                // 角色表参数
                ShiroRole: {
                    data: {
                        id: 0,
                        name: ''
                    },
                },
                // 角色-权限表参数
                ShiroRolePermission: {
                    data: {
                        id: 0,
                        role_id: 0,
                        permission_id: 0
                    },
                },
                // 权限表参数
                ShiroPermission: {
                    data: {
                        id: 0,
                        value: '',
                        description: ''
                    },
                },
                // 部分弹窗
                // 重置shiroResource表确认弹窗
                initShiroResourceDialog: false,
                // 重载shiroResource配置确认弹窗
                resetShiroResourceDialog: false,

                // 删除shiro工具管理员 确认删除弹窗
                deleteShiroAdminDialog: false,
                // 删除shiroResource配置表确认弹窗
                deleteShiroResourceDialog: false,
                // 删除shiroUser用户表确认弹窗
                deleteShiroUserDialog: false,
                // 删除shiroUserRole用户-角色表确认弹窗
                deleteShiroUserRoleDialog: false,
                // 删除shiroRole角色表角色确认弹窗
                deleteShiroRoleDialog: false,
                // 删除shiroRolePermission角色-权限表确认弹窗
                deleteShiroRolePermissionDialog: false,
                // 删除shiroPermission权限表确认弹窗
                deleteShiroPermissionDialog: false,

            }
        },
        created() {
            const that = this;
            this.refreshTable();
        },
        methods: {
            // 修改 header/footer 背景色
            backgroundColorChange() {
                document.getElementById('header').style.backgroundColor = this.default_color
                document.getElementById('footer').style.backgroundColor = this.default_color
            },
            // 刷新表格
            refreshTable() {
                const that = this;
                this.tablesLoading = true;
                $.ajax({
                    url: "/admin/getDataBaseInfo",
                    type: 'get',
                    async: true,
                    success: function (data) {
                        // console.log(data)
                        that.databaseInfo.database = data.database
                        that.databaseInfo.tables = data.tables
                        that.tablesLoading = false;
                    },
                    error:function () {
                        that.tablesLoading = false;
                        this.$message({
                            message: '数据库信息获取失败',
                            type: 'error',
                            center: true,
                            showClose: true,
                            // 显示时间 [单位: 毫秒]
                            duration: 3000
                        });
                    }
                })
            },
            // shiro工具依赖所需表验证(是否存在)
            shiroToolDependencyTableVerification() {
                let result = false;
                $.ajax({
                    url: "/admin/tableIsExist",
                    type: 'get',
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                })
                if (result) {
                    this.$message({
                        message: '工具所需表已存在',
                        type: 'success',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 1000
                    });
                }else {
                    this.$message({
                        // 是否使用HTML
                        //dangerouslyUseHTMLString: true,
                        message: '工具所需表不存在'
                            // '<span style="font-size: 15px; line-height: 36px">工具所需表不存在, 是否自动创建所需表?</span><br/>' +
                            // '<button id="button-cancel" style="margin-left: 36px; width: 66px; height: 32px; border-width: 0; border-radius: 3px; background: #909399; cursor:pointer; outline: none; font-family: \'Microsoft YaHei\',serif ; color: white; font-size: 14px"">' +
                            // '取消' +
                            // '</button>' +
                            // '<button style="margin-left: 80px; width: 66px; height: 32px; border-width: 0; border-radius: 3px; background: #67C23A; cursor:pointer; outline: none; font-family: \'Microsoft YaHei\',serif ; color: white; font-size: 14px"">' +
                            // '确定' +
                            // '</button>'
                        ,
                        type: 'error',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 6000,
                    });
                }
            },
            // 记住我状态改变时
            rememberMeChange() {
                /** 获取的绑定值为改变后的 **/
                if (this.shiroAdmin.rememberMe) {           // 如果改变为记住我

                } else {            // 如果取消记住我
                    if (this.ShiroAdmin.authenticationMode) {
                        this.ShiroAdmin.authenticationMode = !this.ShiroAdmin.authenticationMode;
                    }
                }
            },
            // 查看表数据获取
            showTableData(tableName) {
                this.shiroAdminTableControl = tableName === 'shiro_admin_manage';
                this.shiroResourceTableControl = tableName === 'shiro_resource';
                this.shiroUserTableControl = tableName === 'shiro_user';
                this.shiroUserRoleTableControl = tableName === 'shiro_user_role';
                this.shiroRoleTableControl = tableName === 'shiro_role';
                this.shiroRolePermissionTableControl = tableName === 'shiro_role_permission';
                this.shiroPermissionTableControl = tableName === 'shiro_permission';
                this.tableShowLoading = true;
                const that = this;
                $.ajax({
                    url: "/admin/getTableInfo",
                    type: 'get',
                    data: {
                        "tableName": tableName
                    },
                    async: true,
                    success: function (data) {
                        that.tableShowHead = data.tableHead;
                        that.tableShowData = data.tableData;
                        that.tableShowLoading = false;
                    }
                })
            },
            // 通过后端接口重置/更新资源表信息
            initShiroResource() {
                let result = false;
                $.ajax({
                    url: "/admin/initShiroResources",
                    type: 'get',
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                if (result) {
                    this.showTableData("shiro_resource")
                    this.$message({
                        message: '重置成功',
                        type: 'success',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }else {
                    this.$message({
                        message: '资源资源重置失败',
                        type: 'error',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }
            },

            shiroAdminInfo(data) {
                // 注: 此处使用深拷贝方式赋值
                let admin = JSON.parse(JSON.stringify(data));
                // 从前端表中获取
                this.ShiroAdmin.data = admin
                // TODO: 从后端数据库中获取
            },
            // 编辑资源信息前置获取设置
            shiroResourceInfo(data) {
                let shiroResource = JSON.parse(JSON.stringify(data));
                this.shiroResource.data = shiroResource
            },
            // 编辑用户信息前置获取信息
            userInfo(data) {
                let user = JSON.parse(JSON.stringify(data));
                this.user.data = user
            },
            // 编辑shiro_user用户角色前置获取信息
            shiroUserRoleInfo(data) {
                let userRole = JSON.parse(JSON.stringify(data));
                this.ShiroUserRole.data = userRole
            },
            // 编辑角色前置获取信息
            shiroRoleInfo(data) {
                let role = JSON.parse(JSON.stringify(data));
                this.ShiroRole.data = role
            },
            // 编辑角色权限前置获取信息
            shiroRolePermissionInfo(data) {
                let rolePermission = JSON.parse(JSON.stringify(data));
                this.ShiroRolePermission.data = rolePermission
            },
            // 编辑权限前置获取信息
            shiroPermissionInfo(data) {
                let permission = JSON.parse(JSON.stringify(data));
                this.ShiroPermission.data = permission
            },
            // 重载shiroResource配置信息
            resetShiroResource() {
                let result = false;
                $.ajax({
                    url: "/admin/resetShiroResource",
                    type: 'get',
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                if (result) {
                    this.$message({
                        message: '重载成功',
                        type: 'success',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }else {
                    this.$message({
                        message: '重载资源失败',
                        type: 'error',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }
            },

            // 更新shiro工具管理员
            updateShiroAdmin() {
                let result = false;
                $.ajax({
                    url: "/admin/updateShiroAdmin",
                    type: 'post',
                    data: {
                        id: this.ShiroAdmin.data.id,
                        account: this.ShiroAdmin.data.account,
                        password: this.ShiroAdmin.data.password,
                        email: this.ShiroAdmin.data.email,
                        phone: this.ShiroAdmin.data.phone
                    },
                    async: false,       // 不使用异步执行
                    success: function (data) {
                        result = data;
                    }
                });
                result ? this.messageNotify('success', 'shiro管理员更新成功', 'shiro_admin_manage') : this.messageNotify('error', 'shiro管理员更新失败')
            },
            // 更新资源
            updateShiroResource() {
                let result = false;
                $.ajax({
                    url: "/admin/updateShiroResource",
                    type: 'post',
                    data: {
                        id: this.shiroResource.data.id,
                        value: this.shiroResource.data.value,
                        name: this.shiroResource.data.name,
                        method: this.shiroResource.data.method,
                        description: this.shiroResource.data.description,
                        control: this.shiroResource.data.control,
                        type: this.shiroResource.data.type
                    },
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                if (result) {
                    this.showTableData("shiro_resource")
                    this.$message({
                        message: '更新成功',
                        type: 'success',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }else {
                    this.$message({
                        message: '资源更新失败',
                        type: 'error',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }
            },
            // 更新shiro_user用户
            updateUser() {
                let result = false;
                $.ajax({
                    url: "/userManage/updateShiroUser",
                    type: 'post',
                    data: {
                        id: this.user.data.id,
                        account: this.user.data.account,
                        nickname: this.user.data.nickname
                    },
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                if (result) {
                    this.showTableData("shiro_user")
                    this.$message({
                        message: '更新成功',
                        type: 'success',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }else {
                    this.$message({
                        message: '用户更新失败',
                        type: 'error',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }
            },
            // 更新用户角色
            updateShiroUserRole() {
                let result = false;
                $.ajax({
                    url: "/manage/updateShiroUserRole",
                    type: 'post',
                    data: {
                        id: this.ShiroUserRole.data.id,
                        userId: this.ShiroUserRole.data.user_id,
                        roleId: this.ShiroUserRole.data.role_id,
                        userType: this.ShiroUserRole.data.user_type
                    },
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                if (result) {
                    this.showTableData("shiro_user_role")
                    this.$message({
                        message: '更新成功',
                        type: 'success',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }else {
                    this.$message({
                        message: '用户角色更新失败',
                        type: 'error',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }
            },
            // 更新角色
            updateShiroRole() {
                let result = false;
                $.ajax({
                    url: "/manage/updateShiroRole",
                    type: 'post',
                    data: {
                        id: this.ShiroRole.data.id,
                        name: this.ShiroRole.data.name
                    },
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                if (result) {
                    this.showTableData("shiro_role")
                    this.$message({
                        message: '更新成功',
                        type: 'success',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }else {
                    this.$message({
                        message: '角色更新失败',
                        type: 'error',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }
            },
            // 更新角色权限
            updateShiroRolePermission() {
                let result = false;
                $.ajax({
                    url: "/manage/updateShiroRolePermission",
                    type: 'post',
                    data: {
                        id: this.ShiroRolePermission.data.id,
                        roleId: this.ShiroRolePermission.data.role_id,
                        permissionId: this.ShiroRolePermission.data.permission_id
                    },
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                if (result) {
                    this.showTableData("shiro_role_permission")
                    this.$message({
                        message: '更新成功',
                        type: 'success',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }else {
                    this.$message({
                        message: '角色权限更新失败',
                        type: 'error',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }
            },
            // 更新权限
            updateShiroPermission() {
                let result = false;
                $.ajax({
                    url: "/manage/updateShiroPermission",
                    type: 'post',
                    data: {
                        id: this.ShiroPermission.data.id,
                        value: this.ShiroPermission.data.value,
                        description: this.ShiroPermission.data.description
                    },
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                if (result) {
                    this.showTableData("shiro_permission")
                    this.$message({
                        message: '更新成功',
                        type: 'success',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }else {
                    this.$message({
                        message: '权限更新失败',
                        type: 'error',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }
            },

            // 添加shiro工具管理员
            insertShiroAdmin() {
                let result = false;
                $.ajax({
                    url: "/admin/insertShiroAdmin",
                    type: 'post',
                    data: {
                        account: this.ShiroAdmin.data.account,
                        password: this.ShiroAdmin.data.password,
                        email: this.ShiroAdmin.data.email,
                        phone: this.ShiroAdmin.data.phone
                    },
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                result ? this.messageNotify("success", "添加成功", "shiro_admin_manage") : this.messageNotify("error", "添加失败")
            },
            // 添加资源
            insertResource() {
                console.log(this.shiroResource.data)
                let result = false;
                $.ajax({
                    url: "/manage/insertShiroResource",
                    type: 'post',
                    data: {
                        type: this.shiroResource.data.account,
                        value: this.shiroResource.data.value,
                        method: this.shiroResource.data.method,
                        description: this.shiroResource.data.description,
                        control: this.shiroResource.data.control,
                    },
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                result ? this.messageNotify("success", "添加成功", "shiro_resource") : this.messageNotify("error", "添加失败")
            },
            // 添加shiro_user用户
            insertUser() {
                console.log(this.user.data)
                let result = false;
                $.ajax({
                    url: "/userManage/insertUser",
                    type: 'post',
                    data: {
                        account: this.user.data.account,
                        password: this.user.data.password,
                        nickname: this.user.data.nickname
                    },
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                result ? this.messageNotify("success", "添加成功", "shiro_user") : this.messageNotify("error", "添加失败")
            },
            // 添加shiro_user用户角色
            insertUserRole() {
                console.log(this.ShiroUserRole.data)
                let result = false;
                $.ajax({
                    url: "/userManage/insertUserRole",
                    type: 'post',
                    data: {
                        userId: this.ShiroUserRole.data.user_id,
                        roleId: this.ShiroUserRole.data.role_id,
                        userType: this.ShiroUserRole.data.user_type
                    },
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                result ? this.messageNotify("success", "添加成功", "shiro_user_role") : this.messageNotify("error", "添加失败")
            },
            // 添加角色
            insertRole() {
                console.log(this.ShiroRole.data)
                let result = false;
                $.ajax({
                    url: "/manage/insertShiroRole",
                    type: 'post',
                    data: {
                        name: this.ShiroRole.data.name
                    },
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                result ? this.messageNotify("success", "添加成功", "shiro_role") : this.messageNotify("error", "添加失败")
            },
            // 添加角色-权限
            insertRolePermission() {
                console.log(this.ShiroRolePermission.data)
                let result = false;
                $.ajax({
                    url: "/manage/insertShiroRolePermission",
                    type: 'post',
                    data: {
                        roleId: this.ShiroRolePermission.data.role_id,
                        permissionId: this.ShiroRolePermission.data.permission_id
                    },
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                result ? this.messageNotify("success", "添加成功", "shiro_role_permission") : this.messageNotify("error", "添加失败")
            },
            // 添加权限
            insertPermission() {
                console.log(this.ShiroPermission.data)
                let result = false;
                $.ajax({
                    url: "/manage/insertShiroPermission",
                    type: 'post',
                    data: {
                        value: this.ShiroPermission.data.value,
                        description: this.ShiroPermission.data.description
                    },
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                result ? this.messageNotify("success", "添加成功", "shiro_permission ") : this.messageNotify("error", "添加失败")
            },

            // 消息提示
            messageNotify(message) {
                // 默认为成功提示
                this.messageNotify("success", message, null);
            },
            messageNotify(type, message) {
                this.messageNotify(type, message, null);
            },
            messageNotify(type, message, showTableData) {
                // type     主题      string      success/warning/info/error
                showTableData != null ? this.showTableData(showTableData) : null;
                this.$message({
                    message: message,
                    type: type,
                    center: true,
                    showClose: true,
                    // 显示时间 [单位: 毫秒]
                    duration: 3000
                });
            },

            // 删除shiro工具管理员
            deleteShiroAdmin() {
                let result = false;
                $.ajax({
                    url: "/admin/deleteShiroAdmin",
                    type: 'post',
                    data: {
                        id: this.ShiroAdmin.data.id
                    },
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                result ? this.messageNotify('success', 'shiro管理员删除成功', 'shiro_admin_manage') : this.messageNotify('error', 'shiro管理员删除失败')
            },
            // 删除资源表指定ID资源
            deleteShiroResource() {
                let result = false;
                console.log(this.shiroResource.data.id)
                $.ajax({
                    url: "/manage/deleteShiroResource",
                    type: 'post',
                    data: {
                        id: this.shiroResource.data.id
                    },
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                if (result) {
                    this.showTableData("shiro_resource")
                    this.$message({
                        message: '资源删除成功',
                        type: 'success',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }else {
                    this.$message({
                        message: '资源删除失败',
                        type: 'error',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }
            },
            // 删除shiro_user表用户
            deleteUser() {
                let result = false;
                $.ajax({
                    url: "/userManage/deleteShiroUser",
                    type: 'post',
                    data: {
                        id: this.user.data.id
                    },
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                if (result) {
                    this.showTableData("shiro_user")
                    this.$message({
                        message: '删除成功',
                        type: 'success',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }else {
                    this.$message({
                        message: '用户删除失败',
                        type: 'error',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }
            },
            // 删除用户-角色表指定ID
            deleteShiroUserRole() {
                let result = false;
                $.ajax({
                    url: "/userManage/deleteShiroUserRole",
                    type: 'post',
                    data: {
                        id: this.ShiroUserRole.data.id
                    },
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                if (result) {
                    this.showTableData("shiro_user_role")
                    this.$message({
                        message: '删除成功',
                        type: 'success',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }else {
                    this.$message({
                        message: '用户-角色删除失败',
                        type: 'error',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }
            },
            // 删除 指定ID 角色
            deleteShiroRole() {
                let result = false;
                $.ajax({
                    url: "/manage/deleteShiroRole",
                    type: 'post',
                    data: {
                        id: this.ShiroRole.data.id
                    },
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                if (result) {
                    this.showTableData("shiro_user")
                    this.$message({
                        message: '删除成功',
                        type: 'success',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }else {
                    this.$message({
                        message: '用户删除失败',
                        type: 'error',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }
            },
            // 删除角色-权限表指定ID
            deleteShiroRolePermission() {
                let result = false;
                $.ajax({
                    url: "/manage/deleteShiroRolePermission",
                    type: 'post',
                    data: {
                        id: this.ShiroRolePermission.data.id
                    },
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                if (result) {
                    this.showTableData("shiro_user")
                    this.$message({
                        message: '删除成功',
                        type: 'success',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }else {
                    this.$message({
                        message: '角色-权限删除失败',
                        type: 'error',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }
            },
            // 删除权限表指定ID权限
            deleteShiroPermission() {
                let result = false;
                $.ajax({
                    url: "/manage/deleteShiroPermission",
                    type: 'post',
                    data: {
                        id: this.ShiroPermission.data.id
                    },
                    async: false,
                    success: function (data) {
                        result = data;
                    }
                });
                if (result) {
                    this.showTableData("shiro_permission")
                    this.$message({
                        message: '删除成功',
                        type: 'success',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }else {
                    this.$message({
                        message: '权限删除失败',
                        type: 'error',
                        center: true,
                        showClose: true,
                        // 显示时间 [单位: 毫秒]
                        duration: 3000
                    });
                }
            }

        }
    })
</script>
</html>
<style>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }
    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }
</style>
